<template>
    <view>
        <view class="header">
            <view class="order-title">
                <view class="place-name">南宁凤凰谷</view>
                <view class="go-here">去这里</view>
            </view>
            <view class="order-info" @tap="goVirtualOrderDetail">
                <view class="order-name">南宁凤凰谷门票</view>
                <view class="order-time">3月5号（周六）10:00-18:00</view>
            </view>
        </view>
        <view class="main">
            <view class="order-number">订单号：3243535</view>
            <view class="security-code">验证码：213445</view>
            <view class="Qr-code-picture"></view>
            <view class="price-num">
                <view class="price">总价：￥132.0</view>
                <view class="num">数量：1</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {

        }
    },
    methods: {
        goVirtualOrderDetail() {
            uni.navigateTo({
                url: '/pagesC/order-virtual-detail/order-virtual-detail'
            })
        }
    }
}
</script>

<style>
    .header {
        width: 674rpx;
        height: 212rpx;
        background:rgba(255,255,255,1);
        border-radius: 10rpx;
        margin: 17rpx auto 0;
    }
    .main {
        width: 674rpx;
        height: 546rpx;
        background:rgba(255,255,255,1);
        border-radius: 10rpx;
        margin: 37rpx auto 0;
        padding: 30rpx 0;
    }
    .order-title {
        display: flex;
        justify-content: space-between;
        padding: 17rpx 0;
        margin: 0 17rpx;
        border-bottom: 1rpx solid #F5F5F5;
    }
    .place-name {
        color: #666666;
        font-size: 26rpx;
    }
    .go-here {
        color: #24C79C;
        font-size: 24rpx;
    }
    .order-info {
        margin: 20rpx 0rpx 0 17rpx;
    }
    .order-name {
        color: #333333;
        font-size: 30rpx;
        font-weight: 500;
    }
    .order-time {
        color: #333333;
        font-size: 26rpx;
        font-weight: 500;
        margin-top: 20rpx;
    }
    .order-number {
        color: #333333;
        font-size: 28rpx;
        text-align: center;
    }
    .security-code {
        color: #333333;
        font-size: 28rpx;
        text-align: center;
        margin-top: 30rpx;
    }
    .Qr-code-picture {
        width: 344rpx;
        height: 344rpx;
        border: 1rpx solid #ccc;
        margin: 40rpx auto 0;
    }
    .price-num {
        display: flex;
        justify-content: space-between;
        padding: 30rpx 90rpx;
    }
    .price,
    .num {
        color: #333333;
        font-size: 28rpx;
        font-weight: 500;
    }
</style>